<template>
  <div class="paper">
    <div class="top">
      <div class="form-item">
        <span>年份： </span>
        <el-date-picker
          v-model="formData.year"
          type="year"
          format="yyyy"
          value-format="yyyy"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="form-item">
         <span>试卷种类： </span>
        <el-select v-model="formData.type" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="form-item">
         <span>试卷类别： </span>
        <el-select v-model="formData.category" placeholder="请选择">
          <el-option
            v-for="item in category"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!-- <div class="form-item">
         <span>搜索标题： </span>
        <el-input style="flex:1" v-model="formData.title" placeholder="请输入搜索内容"></el-input>
      </div> -->
      <div class="form-item">
        <el-button @click="clearAll">清除</el-button>
        <el-button type="primary" @click="getSearch">搜索</el-button>
      </div>
    </div>
    <div class="info">
      <div style="margin-bottom:10px;display:flex;justify-content: flex-end;">
        <el-button type="primary" @click="addItem">新增</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="law_year"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="title"
          label="题目内容"
          >
        </el-table-column>
        <el-table-column
          prop="law_type"
          label="试卷类别"
          width="180">
        </el-table-column>
        <el-table-column
          prop="law_base"
          label="试卷种类"
          width="180">
        </el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="type==1?'新增内容':'修改内容'" :visible.sync="showPop">
      <div class="form-item" style="width:100%">
        <span>年份： </span>
        <el-date-picker
          v-model="form.year"
          type="year"
          format="yyyy"
          value-format="yyyy"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="form-item" style="width:100%">
         <span>试卷种类： </span>
        <el-select v-model="form.type" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="form-item" style="width:100%">
         <span>试卷类别： </span>
        <el-select v-model="form.category" placeholder="请选择">
          <el-option
            v-for="item in category"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="form-item" style="width:100%">
         <span>试卷题目： </span>
        <el-input style="flex:1" v-model="form.title" placeholder="请输入搜索内容"></el-input>
      </div>
      <div class="form-item" style="width:100%">
         <span>试卷选项A： </span>
        <el-input style="flex:1" v-model="form.A" placeholder="选项A"></el-input>
      </div>
      <div class="form-item" style="width:100%">
         <span>试卷选项B： </span>
        <el-input style="flex:1" v-model="form.B" placeholder="选项B"></el-input>
      </div>
      <div class="form-item" style="width:100%">
         <span>试卷选项C： </span>
        <el-input style="flex:1" v-model="form.C" placeholder="选项C"></el-input>
      </div>
      <div class="form-item" style="width:100%">
         <span>试卷选项D： </span>
        <el-input style="flex:1" v-model="form.D" placeholder="选项D"></el-input>
      </div>
      <div class="form-item" style="width:100%">
         <span>试卷答案： </span>
        <el-checkbox-group v-model="form.answer">
                  <el-checkbox label="A"></el-checkbox>
                  <el-checkbox label="B"></el-checkbox>
                  <el-checkbox label="C"></el-checkbox>
                  <el-checkbox label="D"></el-checkbox>
        </el-checkbox-group>
      </div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="showPop = false">取 消</el-button>
    <el-button type="primary" v-if="type==1" @click="addOne">确 定</el-button>
    <el-button type="primary" v-else @click="editOne">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'papaerManage',
  data(){
    return{
      options:[{
        value:'法学',
        label:'法学'
      },{
        value:'非法学',
        label:'非法学'
      }],
      category:[{
        value:'法律基础',
        label:'法律基础'
      },{
        value:'法律综合',
        label:'法律综合'
      }],
      formData:{
        year:null,
        type:'',
        category:'',
      },
      tableData:[
      ],
      showPop:false,
      form:{
        year:null,
        type:'',
        category:'',
        title:'',
        A:'',
        B:'',
        C:'',
        D:'',
        answer:[]
      },
      type:1,
  
    }
  },
  components: {

  },
  mounted(){
   this.ruleForm = this.$gl('nowUser')
  },
  methods:{
    addItem(){
      this.form = {
        year:null,
        type:'',
        category:'',
        title:'',
        A:'',
        B:'',
        C:'',
        D:'',
        answer:[]
      }
      this.showPop = true
    },
    clearAll(){
      this.formData={
        year:null,
        type:'',
        category:'',
      }
    },
    editOne(){
        let data = JSON.parse(JSON.stringify(this.form))
      data.answer = this.form.answer.join(',')
      this.$http.editPaper(data).then(res=>{
        if(res.data.data) this.showPop = false
      }).catch(err=>{console.log(err);})
    },
    addOne(){
      let data = JSON.parse(JSON.stringify(this.form))
      data.answer = this.form.answer.join(',')
      this.$http.addPaper(data).then(res=>{
        if(res.data["0"]) this.showPop = false
      }).catch(err=>{console.log(err);})
    },
     handleEdit(index, row) {
        console.log(index, row);
        this.form = row
        this.type = 2
        this.showPop = true
      },
      handleDelete(index, row) {
        this.$http.delPaper({id:row.law_id}).then(res=>{
          console.log(res);
          if(res.success){
            this.getSearch()
          }
        }).catch(err=>{})
        console.log(index, row);
      },
      getSearch(){
        let data = this.formData
        data.page = 1
        this.$http.getPaper(data).then(res=>{
          console.log(res);
          let detail = res.data.data
          detail.forEach(item=>{
            console.log(item.law_content);
            item.content = JSON.parse(item.law_content)
            item.title = item.content.title
            item.A = item.content.A
            item.B = item.content.B
            item.C = item.content.C
            item.D = item.content.D
            item.year = item.law_year,
            item.type = item.law_type,
            item.category=item.law_base,
            item.answer = item.content.answer.split(',')
          })
          this.tableData = detail
        }).catch(err=>{
          console.log(err);
        })
      }
  }
}
</script>
<style lang="less" scoped>
.paper{
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  
}
.top{
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 24px;
    background-color: #fff;
    margin-bottom: 10px;
    box-shadow: 0 1px 8px 0 rgb(0 0 0 / 4%);
}
    .form-item{
      width: 30%;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      
    }
.info{
  width: 100%;
  height: calc(100% - 224px);
  background-color: #fff;
  padding: 40px;
  overflow-y: hidden;
}
</style>